<template>
	<view class="container">
		<view class="group-box">
			<view class="form-list">
				<view class="list-box">
					<text class="title">联系人</text>
					<view class="remark">
						<input class="input" type="text" v-model="model.acceptName" placeholder="收货人姓名" />
					</view>
				</view>
				<view class="list-box">
					<text class="title">手机号</text>
					<view class="remark">
						<input class="input" type="number" v-model="model.mobile" placeholder="收货人手机号码" />
					</view>
				</view>
				<view class="list-box">
					<text class="title">省市区</text>
					<view class="remark opt">
						<text class="text" @click="showArea">{{areaTitle}}</text>
						<dt-picker ref="dtPicker" :data="areaList" @confirm="confirmArea"></dt-picker>
					</view>
				</view>
				<view class="list-box">
					<text class="title">详细地址</text>
					<view class="remark">
						<input class="input" type="text" v-model="model.address" placeholder="收货详细地址" />
					</view>
				</view>
			</view>
		</view>
		<view class="group-box">
			<view class="form-list">
				<view class="list-box">
					<text class="title">设为默认</text>
					<view class="remark right">
						<switch :checked="model.isDefault===1" @change="defaultChange" color="#fa436a" />
					</view>
				</view>
			</view>
		</view>
		<view class="foot-wrap">
			<view class="foot-box">
				<text @click="submit" class="btn-add">确认提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	import dtPicker from '@/components/dt-picker/dt-picker.vue'
	export default {
		components: {
			dtPicker
		},
		data() {
			return {
				areaTitle: '请选择所在地区', //地区标题
				areaList: [], //省市区树
				model: {
					id: 0,
					userId: 0,
					userName: null,
					acceptName: null,
					province: null,
					city: null,
					area: null,
					address: null,
					telphone: null,
					mobile: null,
					zip: null,
					isDefault: 0,
					addTime: null
				}
			}
		},
		methods: {
			//初始化数据
			async initData(id){
				//正在加载
				uni.showLoading({
				    title: '加载中'
				});
				if(id){
					await this.loadData(id);
				}
				//加载省市区
				await this.loadArea();
				//关闭加载
				uni.hideLoading();
			},
			//加载地址信息
			async loadData(id){
				let _this = this;
				await _this.$api.request({
					url: `/account/member/address/${id}`,
				}).then(res=>{
					_this.model = res.data;
					//将地址拆分
					let addrArr = _this.model.address.split(',');
					_this.model.address=addrArr[addrArr.length-1];
					addrArr.pop();
					_this.areaTitle=addrArr.toString();
				});
				
			},
			//加载省市区
			async loadArea(){
				let _this = this;
				await _this.$api.request({
					url: `/client/area`,
				}).then(res=>{
					_this.areaList = res.data;
				});
			},
			//设置地址默认回调
			defaultChange(e){
				if(e.detail.value){
					this.model.isDefault = 1;
				}else{
					this.model.isDefault = 0;
				}
			},
			//选择地区回调
			confirmArea(nodes){
				let _this=this;
				let titleArr=[];
				nodes.map((item,index)=>{
					if(index===0){
						_this.model.province=item.title;
					}else if(index===1){
						_this.model.city=item.title;
					}else if(index===2){
						_this.model.area=item.title;
					}
					titleArr.push(item.title);
				});
				_this.areaTitle=titleArr.toString();
			},
			//显示地区选择窗体
			showArea(){
				this.$refs.dtPicker.show();
			},
			//提交
			async submit(){
				let model = this.model;
				if(!model.acceptName){
					this.$api.msg('请填写收货人姓名');
					return;
				}
				if(!/(^1[3|4|5|7|8|9][0-9]{9}$)/.test(model.mobile)){
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				if(!model.address){
					this.$api.msg('请输入详细的收货地址');
					return;
				}
				if(model.provinceId==0||model.cityId==0||model.areaId==0){
					this.$api.msg('选择所在地区');
					return;
				}
				if(model.id>0){
					await this.$api.request({
						url: `/account/member/address/${model.id}`,
						method: "put",
						data: model,
						loading: true
					}).then(res=>{
						this.goBack(model);
					});
				}else{
					await this.$api.request({
						url: `/account/member/address`,
						method: "post",
						data: model,
						loading: true
					}).then(res=>{
						this.goBack(model);
					});
				}
			},
			//返回并刷新上一页
			goBack(data){
				//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法
				this.$api.prePage().refreshList(data);
				this.$api.msg(`${data.id>0? '修改': '添加'}成功`,1500,false,'success');
				setTimeout(()=>{
					uni.navigateBack();
				}, 800);
			}
		},
		//页面初始化
		onLoad(options){
			//初始化数据
			this.initData(options.id);
		}
	}
</script>

<style lang="scss">
	.foot-wrap{
		height: 96rpx;
		.foot-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 0 24rpx;
			height: 100rpx ;
			.btn-add{
				display: block;
				padding: 0 48rpx;
				color: #fff;
				font-size: 30rpx;
				line-height: 76rpx;
				width: 100%;
				height: 76rpx;
				text-align: center;
				background: #ff5000;
				border-radius: 48rpx;
				box-shadow: 0 2rpx 8rpx rgba($color: #ff5000, $alpha: 0.2)
			}
		}
	}
</style>
